<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<u-navbar :placeholder="true" :autoBack="true"></u-navbar>
		<u-sticky bgColor="#fff">
			<u-tabs lineWidth="30" lineColor="#CCAC82" @change="tabsChange" :list="tablist"
				:current="currentIndex"></u-tabs>
		</u-sticky>
		<view v-show="currentIndex==0">
			<view v-if="packagelist.length<=0" style="margin-top: 200rpx;">
				<u-empty text="暂无卡券" mode="history"></u-empty>
			</view>
			<view v-else style="padding-bottom: 200rpx;">
				<view v-for="(item,index) in packagelist" :key="index" class="margin-sm padding-sm bg-white radius">
					<view class="flex align-start justify-between  ">
						<view>
							<view :class="item.State==1?'text-gray':'text-black'" class="text-lg  text-bold">
								{{item.yname}}
							</view>
							<view :class="item.State==1?'text-gray':''" class="text-sm margin-top-sm">
								可用范围：{{(item.StorePackage)}}</view>
							<view :class="item.State==1?'text-gray':''" class="text-sm ">
								有效期至：{{item.TermOfValidity?item.TermOfValidity:'无限制'}}</view>
							<view :class="item.State==1?'text-gray':''" class="text-sm ">购买日期：{{item.CreateTime}}</view>
						</view>
						<view class="flex flex-direction" style="160rpx">
							<view :class="item.State==1?'text-gray':'text-tea'" class=" text-lg">
								{{item.Price}}元
							</view>
							<view :class="item.State==1?'text-gray':''" style="text-decoration: line-through; "
								class="text-sm">
								原价：{{item.OrginPrice}}元</view>
							<button v-if="item.State==0" class="margin-top-lg cu-btn bg-tea radius sm"
								@click="gotoUse(item.did)">去使用</button>
							<view v-else class="text-gray  text-bold margin-top-sm">已消费</view>
						</view>
					</view>
					<u-line dashed margin="20rpx 0 20rpx 0"></u-line>
					<view class="text-sm text-gray">{{item.StorePackage}}</view>
				</view>
			</view>

		</view>
		<view v-show="currentIndex==1">

		</view>
		<exchangepackage v-show="currentIndex==2"></exchangepackage>
	</view>
</template>

<script>
	import exchangepackage from '@/components/exchangepackage/exchangepackage.vue'
	import {
		queryMycoupon,
		querybycoupon
	} from '@/request/api_user.js'
	export default {
		components: {
			exchangepackage
		},
		data() {
			return {
				currentIndex: 0,
				tablist: [{
					name: '卡券'
				}, {
					name: '优惠券'
				}, {
					name: '兑换'
				}],
				packagelist: [],
			}
		},
		onLoad(params) {
			if (params.index) {
				this.currentIndex = params.index;
			}
			this.getMyPackage();
		},
		methods: {
			//标签切换
			tabsChange(e) {
				this.currentIndex = e.index;

			},
			//查询我的全部卡券，包含已消费
			getMyPackage() {
				let vm = uni.getStorageSync('UserInfo');
				queryMycoupon({
					"uid": vm.id
				}).then((req) => {
					req.data.data.forEach((i) => {
						querybycoupon({
							"id": i.cid
						}).then((r) => {
							this.packagelist.push({
								"did": r.data.data.bid,
								"State": i.statue,
								"StorePackage": r.data.data.scope,
								"TermOfValidity": r.data.data.validity,
								"CreateTime": i.date,
								"Price": r.data.data.price,
								"OrginPrice": r.data.data.orginprice,
								"yname": r.data.data.yname
							})
							console.log(this.packagelist)
						})
					})
				})
			},
			// CanUseRoom(item) {
			// 	return item.RoomRange.map((x) => {
			// 		return x.roomName
			// 	}).join('、');
			// },
			// canUseTime(item) {
			// 	//该卡券适用于周一、二、三、四、五、六 22:00-06:00可用
			// 	let day = '该卡券适用于周' +
			// 		item.WeekList.map((x) => {
			// 			return x.name
			// 		}).join('、');
			// 	day += (item.CanUseTime ? ' ' + item.CanUseTime : ' 全天通用');
			// 	return day;
			// },
			gotoUse(storeId) {
				uni.setStorageSync('storeid', storeId);
				uni.switchTab({
					url: '/pages/user/index/storeindex'
				})
			},
		}
	}
</script>

<style scoped>
</style>